<!-- html -->
<template>
    <h1 class="h1">watch，监视数据变化</h1>
    <span class="span1" @click="watchRefTest1">监视ref</span>
    <span class="span1" @click="watchReactiveTest1">监视reactive</span>
    <span class="span1" @click="watchEffectRefTest1">自动监视ref</span>
    <span class="span1" @click="watchEffectReactiveTest1">自动监视reactive</span>
    <hr>
    <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'watchHome'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function watchRefTest1() {
    router.push({
        path: '/watchHome/watchRefTest1'
    })
}
function watchReactiveTest1() {
    router.push({
        path: '/watchHome/watchReactiveTest1'
    })
}
function watchEffectRefTest1() {
    router.push({
        path: '/watchHome/watchEffectRefTest1'
    })
}
function watchEffectReactiveTest1() {
    router.push({
        path: '/watchHome/watchEffectReactiveTest1'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>